<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/dibu.css">
    <link rel="stylesheet" href="css/dingbu.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_dhzx2yy589.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_pi6wkhyjs2.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_d4wfn85ed59.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2980973_r30d0m6kb9.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_4hd4myhs0ck.css">
    <link rel="stylesheet" href="css/gouwucar.css">
    <link rel="stylesheet" href="css/index.css">



</head>

<body>
    <div class="dingbu">
        <div class="ding">
            <div class="iconfont icon-shouye"></div>
            <div class="shouye">E宠首页</div>
            <div class="songzhi">送至:</div>
            <div class="dizhi">
                <div class="di1">郑州</div>
                <div class="di2"> <img src="img/jiantou.png" alt=""></div>
            </div>
            <span id="jiuzhu" class="iconfont icon-minzhengtubiao1-08"></span>
            <span class="pinzhi">E宠就是正品</span>


            <div class="wenti">问题反馈</div>
            <div class="pion">
                <span id="pion1" class="iconfont icon-shouji"></span>
                <span class="pion2">手机版</span>
                <div class="erweima"><img src="img/code.png" alt=""></div>
            </div>
            <div class="shoucang">
                <div class="cang3"></div>
                <div class="cang2">收藏</div>
                <div id="cang1" class="iconfont icon-shoucang"></div>
                <!-- <ul>
                    <li>我的收藏</li>
                </ul> -->
            </div>
            <div id="shoucang2" class="shoucang">
                <div class="cang3"></div>
                <div class="cang2">我的E宠</div>
                <div id="cang1" class="iconfont icon-wode-active"></div>
            </div>
            <div class="car">
                <div class="car2">购物车</div>
                <div id="car1" class="iconfont icon-gouwuchefill"></div>
            </div>
            <div id="zzcc" class="zhuce">[注册]</div>
            <div id="dl" class="denglu">[登录]</div>
        </div>
    </div>
    <!-- 搜索 -->
    <div class="gouwucar">
        <div class="gouwucar1">
            <a href="index.html">
                <div class="carlogo">
                    <img src="img/epet-logo.png" alt="">
                </div>
            </a>
            <div class="carzi">购物车</div>
            <div class="carsou">
                <div class="carsou2">搜索</div>
                <input type="text" name="" id="carsou1">
            </div>
        </div>
        <div class="gouwucar2">
            <div class="gouwucar21">
                <div class="gouwucar211"></div>
                <div class="gouwucar212">E宠购物车</div>
                <div class="gouwucar213"></div>
            </div>
            <div class="caryou"></div>
            <div class="gouwucar22">我的收藏</div>
            <div class="caryou"></div>
            <div class="gouwucar22">我购买过</div>
            <div class="caryou"></div>
            <div class="gouwucar23">最近浏览</div>
            <div class="caryou"></div>
        </div>

    </div>










    <div class="carshangpin">

        <!-- <div class="carmoban">
                <input type="checkbox" id="aaaa">
                <div class="mobantu"><img src="img/normal3.jpg" alt=""></div>
                <div class="mingzi">加拿大原装进口 爱肯拿Acana 无谷鸭肉巴特利梨配方全犬粮 2kg</div>
                <div class="shuliang">
                    <div class="shuliang1">
                        <button class="jian1">-</button>
                        <input type="text" value="1" class="zhi1">
                        <button class="jian1">+</button>
                        <div class="shuliang11">有货</div>
                    </div>
                </div>
                <div class="jiage">
                    <div class="zongj">￥<span>1887.00</span></div>
                    <div class="danj">￥<span id="danjiaa">629.00</span>/件</div>
                </div>
                <button class="delete">[删除]</button>
            </div> -->



    </div>

    <div class="carshangpin2">
        <div class="pin2-1">
            <div class="pin2-2"></div>
            <div class="pin2-3">
                <div class="pin4">您的购物车空空的，快去选购吧:</div>
                <div class=" pin5">
                    <a href="index.html"><button class="pin51">一键购买</button></a>
                    <a href="index.html"><button class="pin52">去首页</button></a>
                </div>
            </div>

        </div>
    </div>





    <div class="dibu">
        <div class="jiesuan">
            <input type="checkbox" id="quanxuan">
            <div class="quanxuanzi">全选</div>
            <div class="quanshan">[删除选中商品]</div>
            <button id="goumai">去结算</button>
            <div class="fuqian">总价（不含运费）:<span id="fuzongjia">￥00.00</span></div>
        </div>
        <div class="dibu1">
            <div class="dibu2">
                <div class="dibu2-1"></div>
                <div class="dibu2-2">正品保障</div>
            </div>
            <div class="dibu3">
                <div id="dd" class="dibu2-1"></div>
                <div class="dibu2-2">品类丰富</div>
            </div>
            <div class="dibu3">
                <div id="ddd" class="dibu2-1"></div>
                <div class="dibu2-2">优质服务</div>
            </div>
            <div class="dibu3">
                <div id="dddd" class="dibu2-1"></div>
                <div class="dibu2-2">科学养宠</div>
            </div>
            <div class="dibu3">
                <div id="ddddd" class="dibu2-1"></div>
                <div class="dibu2-2">E宠公益</div>
            </div>
            <div id="shier" class="dibu3">
                <div id="dddddd" class="dibu2-1"></div>
                <div class="dibu2-2">爱宠12年</div>
            </div>
        </div>
        <div class="dixian"></div>
        <div class="dibu4">
            <div class="dog"><img src="img/dog_phone.gif" alt=""></div>
            <div class="dibu4-1">
                <div class="dibu4-1-1">售后电话:</div>
                <div class="dibu4-1-2">4008889200<div class="dibu4-1-2-1">「免长途费」</div>
                </div>
                <div class="dibu4-1-3">023-68851700</div>
                <div class="dibu4-1-4">服务时间:09:00--18:30（周一到周日）</div>
            </div>
            <div class="dibu4-2">
                <div class="dibu4-1-1">购物指南</div>
                <div class="dibu4-2-1">新人优惠</div>
                <div class="dibu4-2-2">购物问题</div>
                <div class="dibu4-2-2">支付问题</div>
            </div>
            <div class="dibu4-3">
                <div class="dibu4-1-1">售后服务</div>
                <div class="dibu4-2-1">退换货政策</div>
                <div class="dibu4-2-2">退款说明</div>
                <div class="dibu4-2-2">售后问题</div>
            </div>
            <div class="erweima1">
                <div class="zi">扫描关注E宠</br>商城微信</div>
                <div class="ma"><img src="img/code.png" alt=""></div>
            </div>
            <div class="erweima2">
                <div class="zi">扫描下载APP</br>下单更优惠</div>
                <div class="ma"><img src="img/app-code.jpg" alt=""></div>
            </div>
        </div>
        <div class="dibu5">
            <div class="dibu5-1">
                <div class="dibu5-1-1">关于我们</div>
                <div class="dibu5-1-2">
                    <div class="weibo"></div>
                    <div class="weibo1">E宠商城</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weixin"></div>
                    <div class="weibo1">E宠商城</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="baidu"></div>
                    <div class="weibo1">E宠商城百家号</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="toutiao"></div>
                    <div class="weibo1">E宠说</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">E宠公益</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">联系我们</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">公司地址</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">应急响应</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">仓储中心</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">用户协议</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">易宠科技</div>
                </div>
            </div>
        </div>
        <div class="dibu6">
            <div class="dibu6-1"><img src="img/12315.png" alt=""></div>
            <div class="dibu6-2"><img src="img/baiq.png" alt=""></div>
            <div class="dibu6-2"><img src="img/wsls.png" alt=""></div>
            <div class="dibu6-2"><img src="img/sfqy.png" alt=""></div>
            <div class="dibu6-2"><img src="img/yxqy.png" alt=""></div>
            <div class="dibu6-2"><img src="img/bhdw.png" alt=""></div>
            <div class="dibu6-2"><img src="img/sjws.png" alt=""></div>
        </div>
        <div class="dibu7">
            <div class="dibu7-1">渝ICP备10002905号-1</div>
            <div class="dibu7-2">渝ICP备10002905号-3</div>
            <div class="dibu7-2">营业执照</div>
            <div class="dibu7-2">兽药经营许可证</div>
            <div class="dibu7-3">增值电信业务经营许可证:渝B2-20140042 Copyright © 2007-2021 epet.com</div>
            <div class="dibu7-3">重庆易宠科技有限公司</div>
        </div>
    </div>
    <script src="./jquery-1.11.0.js"></script>
    <script>
        function gouwuche() {
            $.ajax({
                url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
                type: "get",
                data: {
                    id: localStorage.getItem("uid"),
                },
                success: function (data) {
                    console.log(data.data);
                    let data1 = data.data
                    let str = "";
                    data1.forEach((item) => {
                        str += `
                             <div class="carmoban" data-id=${item.pid}>
                                 <input type="checkbox" id="aaaa" class="danxuan">
                                 <div class="mobantu"><img src=${item.pimg} alt=""></div>
                                 <div class="mingzi">${item.pname}</div>
                                 <div class="shuliang">
                                     <div class="shuliang1">
                                         <button id="jian" class="jian1">-</button>
                                         <input type="text" value=${item.pnum} class="zhi1">
                                         <button id="jia" class="jia1">+</button>
                                         <div class="shuliang11">有货</div>
                                     </div>
                                 </div>
                                 <div class="jiage">
                                     <div class="zongj">￥<span  class="zongjia">${item.pnum * item.pprice}</span></div>
                                     <div class="danj">￥<span id="danjiaa" class="danjia">${item.pprice}</span>/件</div>
                                 </div>
                                 <button class="delete">[删除]</button>
                             </div>
                         `
                    })
                    let cart = document.querySelector(".carshangpin");
                    let cart2 = document.querySelector(".carshangpin2");
                    cart.innerHTML = str
                    let moban = document.querySelectorAll(".carmoban");

                    if (moban.length > 0) {
                        cart.style.display = "block"
                        cart2.style.display = "none"
                    } else {
                        cart2.style.display = "block"
                        cart.style.display = "none"
                    }
                    let shan = document.querySelectorAll(".delete");
                    let lll = data.data;
                    lll.forEach((item) => {
                        id1 = item.pid
                    })


                    let jia = document.querySelectorAll(".jia1")
                    let jian = document.querySelectorAll(".jian1")
                    let shu = document.querySelectorAll(".zhi1")
                    let checkone = document.querySelectorAll(".danxuan")
                    let checkAll = document.getElementById("quanxuan");
                    let zong = document.querySelectorAll(".zongjia");
                    let Num = 0;
                    let shu7 = document.querySelector(".zhi1")
                    let zong8 = document.querySelector(".zongjia")
                    let dan9 = document.querySelector("#danjiaa")
                    let danjia = document.querySelectorAll(".danjia")

                    for (let i = 0; i < moban.length; i++) {
                        // 减数量
                        jian[i].onclick = function () {
                            shu[i].value--
                            if (shu[i].value < 1) {
                                shu[i].value = 1
                            }
                            $.ajax({
                                url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                                type: "get",
                                data: {
                                    uid: "74960",
                                    pid: data1[i].pid,
                                    pnum: shu[i].value,
                                },
                                success: function (data) {
                                    console.log(data)
                                    let jiaqian2 = document.getElementsByClassName(
                                        "danj");
                                    console.log(jiaqian2);
                                    console.log(shu7.value)
                                    zong[i].innerText = shu[i].value * danjia[i].innerHTML
                                }
                            })
                        }

                        // 输入数量
                        shu[i].onchange = function () {
                            if (shu[i].value < 1) {
                                shu[i].value = 1
                            } else {
                                shu[i].value = shu[i].value
                            }
                            $.ajax({
                                url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                                type: "get",
                                data: {
                                    uid: "74960",
                                    pid: data1[i].pid,
                                    pnum: shu[i].value,
                                },
                                success: function (data) {
                                    console.log(data)
                                    let jiaqian2 = document.getElementsByClassName(
                                        "jiaqian2");
                                    // let zong = document.getElementsByClassName("zong");
                                    zong[i].innerText = shu[i].value * danjia[i].innerHTML
                                }
                            })
                        }
                        // 加数量
                        jia[i].onclick = function () {
                            shu[i].value++
                            if (shu[i].value < 1) {
                                shu[i].value = 1
                            }
                            $.ajax({
                                url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                                type: "get",
                                data: {
                                    uid: "74960",
                                    pid: data1[i].pid,
                                    pnum: shu[i].value,
                                },
                                success: function (data) {
                                    console.log(data)
                                    let jiaqian2 = document.getElementsByClassName(
                                        "danj");
                                    console.log(jiaqian2);
                                    console.log(shu7.value)
                                    zong[i].innerText = shu[i].value * danjia[i].innerHTML
                                }
                            })
                        }

                        //   删除
                        for (let i = 0; i < moban.length; i++) {
                            shan[i].onclick = function () {
                                let a = $(this).closest(".carmoban").attr("data-id")
                                console.log(a);
                                $.ajax({
                                    url: "http://jx.xuzhixiang.top/ap/api/cart-delete.php",
                                    type: "get",
                                    data: {
                                        uid: localStorage.getItem("uid"),
                                        pid: a,
                                    },
                                    success: function (data) {
                                        cart.removeChild(shan[i].parentNode)
                                        alert(data.msg)
                                        let count = 0
                                        for (let i = 0; i < checkone.length; i++) {
                                            if (checkone[i].checked) {
                                                count++
                                            }
                                        }
                                    }
                                })
                            }
                        }

                        // 全选
                        let quanxuan = $("#quanxuan");
                        let dan = $(".danxuan")
                        quanxuan.click(function () {
                            dan.prop("checked", $(this).prop("checked"));
                        })
                        //按钮对全选
                        dan.click(function () {
                            if ($(".danxuan:checked").length == dan.length) {
                                quanxuan.prop("checked", true)
                            } else {
                                quanxuan.prop("checked", false)
                            }
                        })

                        $("#quanxuan").click(function () {
                            let a = 0;
                            if ($("#quanxuan").prop("checked")) {
                                for (let j = 0; j < $(".danxuan").length; j++) {
                                    if ($(".danxuan").eq(j).prop("checked")) {
                                        let b = $(".danxuan").eq(j).closest(".carmoban").find(
                                            ".zongjia").text()
                                        // console.log(b)
                                        a += +b
                                    }
                                }
                            } else {
                                a = "00.00"
                            }
                            $("#fuzongjia").text(a)
                            console.log(a)
                        });

                        // 单选按钮
                        $(".danxuan").click(function () {
                            let a = 0;
                            for (let j = 0; j < $(".danxuan").length; j++) {
                                if ($(".danxuan").eq(j).prop("checked")) {
                                    let b = $(".danxuan").eq(j).closest(".carmoban").find(
                                            ".zongjia")
                                        .text()
                                    // console.log(b)
                                    a += +b
                                }
                            }
                            $("#fuzongjia").text(a)
                            console.log(a)
                        })
                    }
                }
            })
        }
        // 传用户名
        let denglu = document.getElementById('dl');
        let username3 = localStorage.getItem("username");
        if (username3) {
            denglu.innerText = username3;
        }
        // if(moban.length>0){
        //     cart.style.display="block"
        //     cart2.style.display="none"
        // }else{
        //     cart2.style.display="block"
        //     cart.style.display="none"
        // }
        gouwuche()
    </script>
</body>

</html>